import React, {Component, createRef} from 'react';
import ClassChildren from "@/components/09- createRef/ClassChildren"

class App extends Component {
    /**
     * 与普通元素结合使用，可以获取真实DOM元素。
     * 与类组件结合使用，可以获取类组件的实例对象。
     * 组件：是对标签的一种扩展。
     */
    state = {
        num: 100,
        age: 100,
        className: 'red'
    }
    // 1. 将React.createRef函数运行的结果赋值给实例属性
    myChild = createRef();
    myInp = createRef();
    myH3 = createRef();

    render() {
        return (
            <div>
                {/*2-this.h3Ref作为元素的ref属性值*/}
                <h3 ref={this.myH3}>App</h3>
                <input ref={this.myInp} type="text"/>
                <button onClick={() => {
                    // 3- this.h3Ref对象下的属性current即是真实DOM
                    // console.log(this.myH3.current === document.querySelector("h3")); // true
                    // console.log(this.myH3.current.innerText);// App
                    // console.log(this.myInp.current.value)

                    console.log(this.myChild.current.state.num);// 0
                    this.myChild.current.setState({
                        num: this.myChild.current.state.num + 1
                    })
                }}>点我吧
                </button>
                <hr/>
                <ClassChildren ref={this.myChild}></ClassChildren>
            </div>
        );
    }
}

export default App;